import React, { useContext, useEffect, useState } from 'react';
import { ActionList } from '@/api/modules/authentication';
import {
  Avatar,
  Divider,
  Input,
  Modal,
  Pagination,
  PaginationProps,
  Skeleton,
  Spin,
} from '@arco-design/web-react';
import debounce from 'lodash/debounce';
import styles from '../style/index.module.less';
import Row from '@arco-design/web-react/es/Grid/row';
import Col from '@arco-design/web-react/es/Grid/col';
import { Action } from '@/api/interface/authentication';
import dayjs from 'dayjs';
import ModalTitle from '@/components/ModalTitle';

const { Search } = Input;

interface Props {
  t: unknown;
  rtl: boolean;
  lang: string;
  visible: boolean;
  setVisible: any;
}

function History({ t, rtl, lang, visible, setVisible }: Props) {
  const [skeletonLoading, setSkeletonLoading] = useState(false);
  const [spinLoading, setSpinLoading] = useState(false);
  const [pagination, setPatination] = useState<PaginationProps>({
    sizeOptions: [10, 20, 50, 100],
    sizeCanChange: true,
    showTotal: true,
    total: 0,
    pageSize: 10,
    current: 1,
    pageSizeChangeResetCurrent: true,
  });

  const [keywords, setKeywords] = useState('');
  const searchChange = debounce((value) => setKeywords(value), 500);

  useEffect(() => {
    visible && getActionList(false);
  }, [visible]);

  useEffect(() => {
    getActionList(true);
  }, [pagination.pageSize, pagination.current, keywords]);

  const [actionList, setActionList] = useState<Partial<Action>[]>([]);
  const getActionList = async (spin) => {
    const { current, pageSize } = pagination;
    try {
      if (spin) setSpinLoading(true);
      else setSkeletonLoading(true);
      const { data } = await ActionList({
        pageNo: current,
        pageSize,
        q: keywords,
      });
      setActionList(data.data);
      setPatination({ ...pagination, total: data.count });
    } finally {
      if (spin) setSpinLoading(false);
      else setSkeletonLoading(false);
    }
  };

  const onChange = (pageNumber: number, pageSize: number) => {
    setPatination({
      ...pagination,
      current: pageNumber,
      pageSize,
    });
  };

  const cancel = () => {
    setVisible(false);
    setPatination({ ...pagination, current: 1, pageSize: 10 });
  };

  return (
    <Modal
      title={<ModalTitle title={t['auth.action.title']} />}
      visible={visible}
      footer={null}
      style={{ width: 750 }}
      onCancel={cancel}
      className={styles['auth-action']}
    >
      <Skeleton
        image
        text={{ rows: 15, width: ['100%'] }}
        loading={skeletonLoading}
      >
        <Search
          allowClear
          placeholder={t['auth.input.placeholder.action']}
          onChange={searchChange}
          className={styles['auth-action-search']}
        />
        <Spin loading={spinLoading}>
          <div className={styles['auth-action-list']}>
            {actionList.map((item, index) => {
              return (
                <div key={index}>
                  <div className={styles['auth-action-item']}>
                    <Avatar size={48}>{item.description.slice(0, 1)}</Avatar>
                    <Row style={{ flex: 1 }}>
                      <Col
                        span={12}
                        style={{ textAlign: rtl ? 'right' : 'left' }}
                      >
                        <span>
                          {t['auth.action.name']}：{item.operatorName}
                        </span>
                      </Col>
                      <Col
                        span={12}
                        style={{ textAlign: rtl ? 'right' : 'left' }}
                      >
                        <span>
                          {t['auth.action.date']}：
                          {dayjs(item.operateTime).format(
                            'YYYY-MM-DD HH:mm:ss'
                          )}
                        </span>
                      </Col>
                      <Col
                        span={24}
                        style={{
                          marginTop: '6px',
                          textAlign: rtl ? 'right' : 'left',
                        }}
                      >
                        <span>
                          {t['auth.action.actions']}：
                          {lang === 'en-US'
                            ? item.description
                            : item.descriptionAr}
                        </span>
                      </Col>
                    </Row>
                  </div>
                  <Divider />
                </div>
              );
            })}
          </div>
        </Spin>
        <Pagination
          {...pagination}
          onChange={onChange}
          className={styles['auth-action-pagination']}
        />
      </Skeleton>
    </Modal>
  );
}

export default History;
